<template>
  <a-modal
    :title="'选择图片'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div
      class="ant-pro-pages-list-projects-cardList"
      style="clear: both"
    >
      <a-list
        :loading="loading"
        :data-source="dataSource"
        :grid="{ gutter: 0 }"
      >
        <a-list-item
          slot="renderItem"
          slot-scope="item"
        >
          <a-card
            v-if="type==1"
            style="cursor: pointer;"
            class="ant-pro-pages-list-projects-card"
            hoverable
          >
            <img
              @click="selectImg(item)"
              slot="cover"
              :src="item.url"
              style="height: 200px; object-fit: scale-down;"
              onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
            />
          </a-card>
          <a-card
            v-if="type==2"
            @click="selectImg(item)"
          >
            <div style="padding:0 10px">
              <p style="width:80%;word-break: break-all;">{{ item.name }}</p>
              <p style="color: #40a9ff;">MedId</p>
            </div>
          </a-card>
          <a-card
            v-if="type==3"
            @click="selectImg(item)"
          >
            <div style="padding:0 10px">
              <p style="width:80%;word-break: break-all;">{{ item.name }}</p>
              <p style="color: #40a9ff;">MedId</p>
            </div>
          </a-card>
        </a-list-item>
      </a-list>

    </div>
    <div style="    display: flex;justify-content: flex-end;">
      <a-pagination
        v-model="pageNum"
        :total="total"
        :item-render="itemRender"
        :show-total="total => `共 ${total} 条记录`"
        :page-size="pageSize"
        show-quick-jumper
        @change="onChange"
      />
    </div>
  </a-modal>
</template>
<script>
import { postAction, getAction } from '@/api/manage'
export default {
  props: {
    appid: {
      type: String,
      default: null
    },
    menuType: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-wx',
      dataSource: [],
      loading: false,
      pageNum: 1,
      type: '',
      total: 0,
      showAdd: false,
      pageSize: 18,
      itemRender: (current, type, originalElement) => {
        if (type === 'prev') {
          return <a>上一页</a>
        } else if (type === 'next') {
          return <a>下一页</a>
        }
        return originalElement
      }
    }
  },
  mounted() {
    this.loadData()
  },
  watch: {
    appid() {
      this.loadData()
    }
  },
  created() {
    console.log(this.menuType)
    if (this.menuType == 4 || this.menuType == 2) {
      this.type = 1
    } else if (this.menuType == 5) {
      this.type = 3
    } else {
      this.type = 2
    }
  },
  methods: {
    reset() {
      this.$emit('close')
    },
    selectImg(item) {
      this.$emit('close', item.url, item.mediaId)
    },
      onChange() {
      this.loadData()
    },
    loadData() {
      this.loading = true
      const params = {
        appid: this.appid,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: this.type
      }
      postAction(`${this.urlKey}/WxMaterial/findWxMaterialListByCondition`, params).then(data => {
        if (data.code == 200) {
          this.dataSource = data.data.records
          this.total = data.data.total
        } else {
          this.$message.warning(data.msg || data.message)
        }
        this.loading = false
      })
    }
  }
}
</script>
<style scoped lang="less">
@import './less/index.less';
.mr-10 {
  margin-right: 10px;
}
.previmg {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 300px;
  }
}
.container {
  position: relative;
  width: 100%;
  background: #969799;
  height: 0;
  padding-bottom: 56.25%;
  display: flex;
  justify-content: center;
}
</style>

